<template>
  <router-view class="content"></router-view>

  <!-- 底部导航 -->
  <!-- 设置底部导航背景颜色，上边框，激活/非激活颜色，icon图标 -->
  <tabbar
    route
    active-color="#CA141D"
    v-show="isShowTabBar"
    inactive-color="#606162"
    style="background-color: #f1f3f5; border-top: 1px solid #e7e9eb"
  >
    <tabbar-item
      replace
      :to="{ name: 'Index' }"
      icon="wap-home-o"
      style="background-color: #f1f3f5"
    >
      首页
    </tabbar-item>
    <tabbar-item
      replace
      :to="{ name: 'Category' }"
      icon="apps-o"
      style="background-color: #f1f3f5"
    >
      标签
    </tabbar-item>
    <tabbar-item
      replace
      :to="{ name: 'Activity' }"
      icon="eye-o"
      style="background-color: #f1f3f5"
    >
      发现
    </tabbar-item>
    <tabbar-item
      replace
      :to="{ name: 'Cart' }"
      icon="cart-o"
      :badge="cartCount"
      style="background-color: #f1f3f5"
    >
      购物车
    </tabbar-item>
    <tabbar-item
      replace
      :to="{ name: 'User' }"
      icon="contact"
      style="background-color: #f1f3f5"
    >
      我的
    </tabbar-item>
  </tabbar>
</template>

<script setup>
import { ref, watch,provide } from "vue";
import { useRoute } from "vue-router";
import { Tabbar, TabbarItem } from "vant";

const cartCount = ref(0);
// provide数据提供者,那么所有的子组件都可以读取他里面的数据
provide("cartCount", cartCount);

const isShowTabBar = ref(true);
const route = useRoute();

// 监听路由变化，控制底部导航显示和隐藏
watch(route, (v) => {
  if (v.meta.hideTabBar) {
    isShowTabBar.value = false;
  } else {
    isShowTabBar.value = true;
  }
});
</script>

<style scoped lang="scss">
.contant {
  flex: 1;
  overflow: auto;
}
</style>
